/*
 * @Description: 工单头部
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-03-30 10:49:48
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-04 18:33:11
 */
import React, { useState } from 'react';
import { Button, Row, Col, Input, } from 'antd';
// import PubSub from 'pubsub-js';
import {
    SettingOutlined,
    PlusOutlined,
    UpOutlined
} from '@ant-design/icons';
import SearchForm from '../searchForm';
import SelfSeting from './slefSeting';
import NewAddOrder from './newAddOrder'
import PubSub from 'pubsub-js';
import './index.css'
import '../button.css'
const OrderHeader = () => {
    const [changenRotate, setchangenRotate] = useState(0)  //设置高级收索图标旋转状态
    const [changeHeiht, setHeight] = useState('form-contanier2') //显示隐藏高级收索变量
    const [changeSeting, setchangeSeting] = useState('selfSeting2')//显示隐藏自定义设置变量
    const [newAddFlage, setnewAddFlage] = useState(false)

    //显示隐藏高级收索处理函数
    function showHeadle() {
        changenRotate === 0 ? setchangenRotate(180) : setchangenRotate(0)
        changeHeiht === 'form-contanier2' ? setHeight('form-contanier1') : setHeight('form-contanier2')
        // console.log(titleArr);//未完成.......
    }
    //显示隐藏自定义设置
    function showSetingHeadle() {
        // console.log("showSeting");
        changeSeting === 'selfSeting2' ? setchangeSeting('selfSeting1') : setchangeSeting('selfSeting2')
    }
    //显示隐藏新增工单界面
    function showAddOreder(e) {
        e.stopPropagation();
        newAddFlage ? setnewAddFlage(false) : setnewAddFlage(true)
        PubSub.publish('newAddOrder', newAddFlage)
        setnewAddFlage(false)
        // console.log('显示隐藏新增工单界面');
    }
    return (
        <>
            <header>
                <Row className='header-Row1'>
                    <Col span={12}> <Button type="primary" className='btn-bgc-1'>工单列表<span className='count-text'>4</span></Button>
                        <Button type="primary" className='btn-bgc-2'>我参与的 <span className='count-text'>4</span></Button>
                        <Button type="primary" className='btn-bgc-2'>我发起的 <span className='count-text'>4</span></Button>
                        <Button type="primary" className='btn-bgc-4' onClick={showAddOreder}>
                            <PlusOutlined />新增工单<NewAddOrder />
                        </Button>
                        &nbsp;&nbsp;<Button type="primary" className='btn-bgc-3' size='small' onClick={showSetingHeadle}><SettingOutlined />自定义设置</Button>
                    </Col>
                    <Col span={5} offset={3}>
                        <Input className='search-inpuet' placeholder="客户名称、手机号码、指派人员" name="search" />
                    </Col>
                    <Col>
                        <Button type="primary" className='btn-bgc-5'>搜索</Button>&nbsp;&nbsp;
                        <Button type="primary" className='btn-bgc-6 rotate-amition' onClick={showHeadle} >高级搜索 <UpOutlined rotate={changenRotate} /> </Button>
                    </Col>
                </Row>
                {/* 第二行 */}
                <Row className='header-Row2'>
                    <Col span={10} offset={7}>
                        <Button type="primary" className='btn-bgc-1' >所有工单 </Button>
                        <Button type="primary" className='btn-bgc-4' >已完成 </Button>
                        <Button type="primary" className='btn-bgc-4' >处理中</Button>
                        <Button type="primary" className='btn-bgc-4' >未处理</Button>
                    </Col>
                </Row>
            </header>
            {/* <section className='form-contanier'  style = {{display:changeHeiht}}> */}
            {/* 自定义收索 */}
            <section className={changeHeiht}>
                <SearchForm />
            </section>
            {/* 自定义设置 */}
            <section className={changeSeting}>
                <SelfSeting changeSeting={showSetingHeadle} />
            </section>
            {/* 新增工单 */}
            <section>
            </section>
        </>
    );
}

export default OrderHeader;
